import React, {PureComponent} from "react";
import {Platform, StyleSheet, Text,TextInput, View,Button, ScrollView, Image, Dimensions, TouchableOpacity} from "react-native";
import CommentHeaderView from '../../widget/comment/CommentHeaderView'
const {width} = Dimensions.get('window')

type Props = {
    navigation:any,
}

export default class CommentScene extends PureComponent<Props>{
    static navigationOptions = ({navigation}: any) => ({
        header:null
    })
    constructor(props){
        super(props)
        this.state = {
           change : 100
        }
    }
    render(){
        return (
            <View style={{flex:1}}>
                <CommentHeaderView back={()=>{this.props.navigation.goBack()}}/>
                <View style={{paddingLeft:12,paddingRight:12,paddingTop:20,borderTopRightRadius:6,borderTopLeftRadius:6,backgroundColor:'white',}}>
                    <TextInput  onChangeText={(text)=>{this._onChangeText(text)}} multiline={true} maxLength={100} style={{height:300,fontSize:13}}
                                placeholder='当前评论内容正在输入' placeholderTextColor='rgba(0,0,0,0.3)'/>
                </View>
                <View style={{backgroundColor:'white',flexDirection:'row',alignItems:'center',paddingBottom:20,paddingRight:12}}>
                    <View style={{flex:1}}/>
                    <Text style={{color:'#DB3843',fontWeight:'bold', fontSize:12}}>{this.state.change}</Text>
                    <Text style={{color:'#B6B7B9',fontWeight:'bold', fontSize:12}}>.100</Text>
                    <View style={{marginLeft:12,backgroundColor:'#26C435',shadowOffset:{h:2,w:2},
                        shadowRadius:1,
                        shadowOpacity:0.4,width:4,height:4,borderRadius:2,borderWidth:2,borderColor:'rgba(38, 196, 53, 0.2)'}}/>
                </View>
            </View>
        )
    }
    _onChangeText(text){
        this.setState({change:(100-text.length)})
    }
}